<template>
	<view class="min-h-[100vh] bg-background">
		<view class="bg-white sticky top-0 z-50">
			<up-tabs
				@change="tabsChange"
				:list="tabs"
				:scrollable="false"
				lineColor="#C39A71"
				:activeStyle="{ color: '#C39A71' }"
				:itemStyle="{ fontSize: '28rpx', height: '80rpx' }"
			></up-tabs>
		</view>
		<view class="px-[30rpx] py-[24rpx]">
			<template v-if="list.length">
				<view class="mb-[24rpx] last:mb-0" v-for="item in list" @click="toOrderDetail(item)" :key="item.order.id">
					<up-transition :show="true" mode="fade-up">
						<view class="bg-white rounded-[16rpx]">
							<view class="px-[30rpx]">
								<view class="flex py-[30rpx] items-center justify-between border-b border-background">
									<view class="flex items-center">
										<up-image :src="shop" width="32rpx" height="32rpx"></up-image>
										<view class="text-[26rpx] font-bold ml-[12rpx]">{{ typeMap[item.order.type] }}订单</view>
									</view>
									<view class="text-[22rpx] flex items-center">
										<view class="">{{ statusMap[item.order.status] }}</view>
										<view class="flex items-center" v-if="item.order.status == 101">
											<view class="">，剩余</view>
											<up-count-down :time="item.timeCanal" format="mm分ss秒"></up-count-down>
										</view>
									</view>
								</view>
							</view>
							<view class="">
								<OrderDrinkList :list="item.appOrderGoodList"></OrderDrinkList>
							</view>
							<view class="flex items-center justify-between p-[30rpx]">
								<view class="text-[22rpx]">创建: {{ item.order.createTime }}</view>
								<view class="flex items-center" v-if="item.order.status == 101">
									<view class="option border-[#E5E5E5]">取消订单</view>
									<view class="option border-[#FF0000] text-[#FF0000]">继续付款</view>
								</view>
								<view class="text-[22rpx]" v-else-if="item.order.status !== 202">
									<text>支付:</text>
									<text class="text-[#FF0000] font-bold">￥{{ item.order.price }}</text>
								</view>
							</view>
						</view>
					</up-transition>
				</view>
				<up-loadmore :status="loadmore" />
			</template>
			<up-empty mode="list" marginTop="200rpx" text="查询结果为空" v-else></up-empty>
		</view>
		<CustomerService></CustomerService>
	</view>
</template>

<script setup>
import { reactive, readonly, ref } from 'vue';
import shop from '@/static/shop.png';
import { getOrderList } from '@/config/api/order';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import utils from '@/utils/utils';
onLoad(() => {
	reset();
});
onReachBottom(() => {
	if (list.value.length < params.total) {
		loadmore.value = 'loading';
		params.pageNum++;
		queryOrderList();
	} else {
		utils.showToast('已经到底了~');
	}
});
const { list, params, queryOrderList, reset, tabs, tabsChange, typeMap, loadmore, statusMap } = useOrder();
function useOrder() {
	const list = ref([]);
	const loadmore = ref('loadmore');
	const params = reactive({
		pageNum: 1,
		pageSize: 10,
		statusList: '',
		total: 0,
		orderType: '0,1'
	});
	const typeMap = readonly({
		0: '堂食',
		1: '外卖',
		2: '商城'
	});
	const statusMap = readonly({
		101: '待付款',
		201: '已支付',
		202: '已取消',
		301: '待配送',
		401: '已配送',
		501: '已评价',
		502: '申请退款',
		503: '退款中',
		504: '退款完成'
	});
	const tabs = reactive([
		{
			name: '全部',
			id: 0,
			status: ''
		},
		{
			name: '待付款',
			id: 1,
			status: '101'
		},
		{
			name: '待配送',
			id: 2,
			status: '301'
		},
		{
			name: '已配送',
			id: 3,
			status: '401'
		},
		{
			name: '已取消',
			id: 4,
			status: '202'
		}
	]);
	const tabsChange = (e) => {
		params.statusList = e.status;
		reset();
	};
	//获取订单列表
	const queryOrderList = async () => {
		try {
			const res = await getOrderList(params);
			if (res.code == 200) {
				list.value = list.value.concat(res.rows);
				params.total = res.total;
				if (list.value.length >= params.total) {
					loadmore.value = 'nomore';
				} else {
					loadmore.value = 'loading';
				}
			}
		} catch (e) {
			//TODO handle the exception
		}
	};
	const reset = () => {
		params.pageNum = 1;
		list.value = [];
		queryOrderList();
	};
	return { list, params, queryOrderList, reset, tabs, tabsChange, typeMap, loadmore, statusMap };
}
const toOrderDetail = (item) => {
	uni.navigateTo({
		url: `/pages/drinkOrderDetail/drinkOrderDetail?orderId=${item.order.id}`
	});
};
</script>

<style scoped lang="scss">
.option {
	@apply w-[160rpx] h-[66rpx] rounded-full border  flex items-center justify-center text-[26rpx] mr-[12rpx] last:mr-0;
}
</style>
